import React, { useState } from 'react';
import _ from 'lodash';
import { FileSearchOutlined } from '#/utils/antdIcons.js';
import { useTablePipeline, features } from 'ali-react-table';

import { TjTable } from '@/pages/ETrade/components/index.js';
import { tableColumns } from '../../helper.js';

export default ({ tableData, choseValue }: any) => {
  const [openKeys, onChangeOpenKeys]: any = React.useState([1]);
  const dataTable = _.cloneDeep(tableData);

  const handleClick = (record: any) => {
    let choseData: any = {};
    const fn = (data: any) => {
      return data.find((t: any) => {
        if (t.id === record.id) {
          return (choseData = t.children);
        }
        if (t.children) fn(t.children);
      });
    };
    fn(tableData);
    choseValue(choseData);
  };

  const getColumns = (columns: any) => {
    columns[0].render = (v: any, record: any) => {
      return (
        <div
          style={{
            display: 'flex',
            justifyContent: 'flex-start',
          }}
        >
          <div>{v}</div>
          {record?.children ? (
            <div
              style={{ marginLeft: '10px', color: '#18A0FB', cursor: 'pointer' }}
              onClick={(e: any) => {
                e.stopPropagation();
                handleClick(record);
              }}
            >
              <FileSearchOutlined />
            </div>
          ) : null}
        </div>
      );
    };

    return columns;
  };

  const pipeline = useTablePipeline({ components: {} })
    .input({ dataSource: dataTable, columns: getColumns(tableColumns) })
    .primaryKey('id')
    .use(
      features.treeMode({
        openKeys,
        onChangeOpenKeys,
        indentSize: 20,
        iconIndent: 5,
      }),
    );
  return (
    <TjTable
      style={{
        // '--header-bgcolor': '#434749',
        '--header-color': 'white',
        '--border-color': 'rgba(255, 255, 255, 0.1)',
        '--header-row-height': '36px',
        '--font-size': '12px',
        '--cell-border-vertical': '1px solid rgba(255, 255, 255, 0.1)',
        '--header-cell-border-vertical': '1px solid rgba(255, 255, 255, 0.1)',
        '--bgcolor': '#222629',
        '--color': 'white',
        '--hover-bgcolor': '#222629',
        '--cell-padding': '4px 5px',
        border: '1px solid #444',
        borderRadius: '5px',
      }}
      useOuterBorder={true}
      stickyScrollHeight={10}
      useVirtual={{ horizontal: true, vertical: true, header: false }}
      {...pipeline.getProps()}
    />
  );
};
